<script setup lang="ts">
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { updataProductList } from '@/store/product';
import * as productAPI from '@/api/product';
import Publish from '@/components/publish.vue';

const route = useRoute();
const router = useRouter();
const itemId = ref<number>(-1);
const nameId = ref<number>(-1);
const userName = ref(localStorage.getItem('username'));

// 获取项目列表
const productList: any = updataProductList();
productList.updataProduct(route.params.id);

// 轮播图列表
const list = [
  {
    id: 1,
    tatleURl: 'https://img.alicdn.com/imgextra/i3/O1CN01HpmW5b288IXNzWHCr_!!6000000007887-2-tps-1006-70.png',
    picURl: 'https://img.alicdn.com/tfs/TB1ykWbO3HqK1RjSZJnXXbNLpXa-2880-600.png',
  },
  {
    id: 2,
    tatleURl: 'https://img.alicdn.com/imgextra/i2/O1CN01TrX5CM1WmBcxpOJ12_!!6000000002830-2-tps-1246-164.png',
    picURl: 'https://img.alicdn.com/imgextra/i2/O1CN01Ry2q7P25R7yXbQCpx_!!6000000007522-2-tps-2880-600.png',
  },
  {
    id: 3,
    tatleURl: 'https://img.alicdn.com/imgextra/i1/O1CN01Z9DWNX28Bxg320SZv_!!6000000007895-2-tps-1246-164.png',
    picURl: 'https://img.alicdn.com/imgextra/i4/O1CN01YlgSpY1NgqSnnektk_!!6000000001600-2-tps-2880-598.png',
  },
  {
    id: 4,
    tatleURl: 'https://img.alicdn.com/imgextra/i3/O1CN01E0k4FC1ftokBzhaG2_!!6000000004065-2-tps-1246-164.png',
    picURl: 'https://img.alicdn.com/imgextra/i2/O1CN01w8LYwO29pBD1DUoET_!!6000000008116-2-tps-2880-600.png',
  },
  {
    id: 5,
    tatleURl: 'https://img.alicdn.com/imgextra/i4/O1CN01Ku2xPt1QqPW2qW4gM_!!6000000002027-2-tps-1134-153.png',
    picURl: 'https://img.alicdn.com/imgextra/i4/O1CN01iytk2m1QUQY3rbIkC_!!6000000001979-2-tps-2880-600.png',
  },
  {
    id: 6,
    tatleURl: 'https://img.alicdn.com/tfs/TB1WYB9OVYqK1RjSZLeXXbXppXa-1134-153.png',
    picURl: 'https://img.alicdn.com/tfs/TB1ykWbO3HqK1RjSZJnXXbNLpXa-2880-600.png',
  },
];

// 项目列表鼠标移入事件
function onMouseEnter(id: number) {
  itemId.value = id;
}

// 项目列表鼠标移出事件
function onMouseLeave() {
  itemId.value = -1;
}

// 发布
function onSelect(params: any) {
  productAPI.putProductStatus({
    id: params.id,
    status: params.status,
  })
    .then((res: any) => {
      productList.updataProduct(route.params.id);
      ElMessage.success(`${res.msg}`);
    })
    .catch((err: any) => {
      ElMessage.error(`${err.msg}`);
    });
}

// 删除
function onDelete(item: any) {
  if (item.status === 0) {
    ElMessageBox.confirm(
      `${item.productName} 删除后无法恢复，确认删除？`,
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )
      .then(() => {
        productAPI.deleteProduct(item.id)
          .then((res: any) => {
            productList.updataProduct(route.params.id);
            ElMessage.success(`${res.msg}`);
          })
          .catch((err: any) => {
            ElMessage.error(`${err.msg}`);
          });
      })
      .catch(() => {});
  } else {
    ElMessageBox.confirm(
      `${item.productName} 处于发布状态，请确认关闭发布后再删除`,
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      },
    );
  }
}

// 项目名称修改
async function onBlur(id: number, productName: string) {
  await productAPI.putProduct({
    id,
    productName,
  });
  productList.updataProduct(route.params.id);
}

function goCreation() {
  // 跳转到创建页面
  router.push({
    name: 'creation',
    params: {
      id: route.params.id,
    },
  });
}

function onSecede() {
  // 删除本地储存username
  localStorage.removeItem('username');
  localStorage.removeItem('TOKEN');
  router.push('/login');
}

function goScreen(id: number) {
  router.push({
    name: 'screen',
    params: {
      id,
    },
  });
}
</script>

<template>
  <div class="container">
    <div class="carousel-wrapping">
      <!-- 顶部轮播图 -->
      <el-carousel
        :interval="5000"
        direction="vertical"
        arrow="never"
        trigger="click"
        class="carousel"
      >
        <el-carousel-item
          v-for="item in list"
          :key="item.id"
        >
          <div class="avatar">
            <img :src="item.picURl">
          </div>
          <div class="tatle-avatar">
            <img :src="item.tatleURl">
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="nav-user">
        <div>DataV 仅支持谷歌 Chrome 浏览器版本 56 以上</div>
        <div>
          <el-dropdown>
            <span class="el-dropdown-link">
              {{ userName }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu class="user">
                <el-dropdown-item>用户中心</el-dropdown-item>
                <el-dropdown-item>产品新购</el-dropdown-item>
                <el-dropdown-item @click="onSecede">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <!-- 标签页 -->
      <el-tabs
        class="demo-tabs"
      >
        <el-tab-pane>
          <template #label>
            <span class="custom-tabs-label">
              <el-icon><DocumentCopy /></el-icon>
              <span>我的可视化</span>
            </span>
          </template>
          <div
            w50rem
            h18rem
            flex
            justify-center
            items-center
            bg-dark
          >
            <dv-decoration2
              :dur="6"
              style="width:100%;height:5px;"
            />
          </div>
          <div class="nav-shadow"></div>
          <div class="my-project">
            <div class="project-manage">
              <div>
                <span>我的分组</span>
                <el-icon>
                  <Plus />
                </el-icon>
              </div>
              <ul>
                <li>
                  <span>全部应用</span>
                  <span>{{ 2 }}</span>
                </li>
              </ul>
            </div>
            <div class="project-screen">
              <div>
                <div>选择下面的方式进行创建</div>
                <div
                  class="new-project"
                  @click="goCreation"
                >
                  <img src="https://img.alicdn.com/tfs/TB1wwyKqZVl614jSZKPXXaGjpXa-300-156.png">
                  <span>PC端创建</span>
                </div>
              </div>
              <div class="all-app">
                <div class="app-head">
                  <span>全部应用</span>
                  <span>{{ `共 ${ productList.productList.length } 个` }}</span>
                  <el-icon><QuestionFilled /></el-icon>
                  <span>管理项目配额</span>
                </div>
                <div class="app-list">
                  <ul>
                    <li
                      v-for="item in productList.productList"
                      :key="item.id"
                      @mouseenter="onMouseEnter(item.id)"
                      @mouseleave="onMouseLeave"
                    >
                      <div class="app-avatar">
                        <img :src="item.img_url">
                      </div>
                      <div
                        v-show="item.id === itemId"
                        class="app-button"
                      >
                        <div>
                          <el-tooltip
                            effect="dark"
                            content="预览"
                            placement="bottom"
                            :enterable="false"
                          >
                            <el-icon class="icon-color"><Monitor /></el-icon>
                          </el-tooltip>
                          <Publish
                            :status="item.status"
                            :id="item.id"
                            @select="onSelect"
                          />
                        </div>
                        <div>
                          <button @click="goScreen(item.id)">编辑</button>
                        </div>
                        <div>
                          <el-tooltip
                            effect="dark"
                            content="移动"
                            placement="bottom"
                            :enterable="false"
                          >
                            <el-icon class="icon-color"><Rank /></el-icon>
                          </el-tooltip>
                          <el-tooltip
                            effect="dark"
                            content="复制"
                            placement="bottom"
                            :enterable="false"
                          >
                            <el-icon class="icon-color"><DocumentCopy /></el-icon>
                          </el-tooltip>
                          <el-tooltip
                            effect="dark"
                            content="拷屏"
                            placement="bottom"
                            :enterable="false"
                          >
                            <el-icon class="icon-color"><Monitor /></el-icon>
                          </el-tooltip>
                          <el-tooltip
                            effect="dark"
                            content="删除"
                            placement="bottom"
                            :enterable="false"
                          >
                            <el-icon
                              class="icon-color"
                              @click="onDelete(item)"
                            >
                              <Delete />
                            </el-icon>
                          </el-tooltip>
                          <el-tooltip
                            effect="dark"
                            content="拷贝到工作空间"
                            placement="bottom"
                            :enterable="false"
                          >
                            <el-icon class="icon-color"><Platform /></el-icon>
                          </el-tooltip>
                        </div>
                      </div>
                      <div class="app-name">
                        <div>
                          <el-icon><EditPen /></el-icon>
                          <el-input
                            v-model="item.productName"
                            class="input-name"
                            @blur="onBlur(item.id, item.productName)"
                          />
                        </div>
                        <div>
                          <span :class="item.status === 0 ? '' : 'active'"></span>
                          <div v-if="item.status === 0">未发布</div>
                          <div v-else>已发布</div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <template #label>
            <span class="custom-tabs-label">
              <el-icon><ScaleToOriginal /></el-icon>
              <span>我的数据</span>
            </span>
          </template>
          <div class="to-do">todo</div>
        </el-tab-pane>
        <el-tab-pane>
          <template #label>
            <span class="custom-tabs-label">
              <el-icon><User /></el-icon>
              <span>我的资产</span>
            </span>
          </template>
          <div class="to-do">todo</div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;

  .carousel-wrapping {
    width: 100%;
    background-color: #171b22;
    position: relative;

    .carousel {
      height: 290px;

      :deep(.el-carousel__button) {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50%;
      }

      .avatar {
        width: 100%;
        height: 290px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .tatle-avatar {
        position: absolute;
        left: 40px;
        top: 80px;

        img {
          transform: scale(.5) translate(-50%, -50%);
          user-select: none;
        }
      }
    }

    .nav-user {
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 24px;
        box-sizing: border-box;
        color: #bcc9d4;

        &>div:nth-child(1) {
          font-size: 12px;
        }

        .el-dropdown {
          color: #bcc9d4 !important;
          cursor: pointer;
        }

        .example-showcase .el-dropdown-link {
          cursor: pointer;
          display: flex;
          align-items: center;
        }

        .user {
          background-color: #171b22;
        }
      }

    .demo-tabs {
      width: 100%;

      :deep(.el-tabs__nav-scroll) {
        padding: 20px 30px 0 30px;
      }
      :deep(.el-tabs__nav-wrap::after) {
        background-color: #171b22;
      }
      :deep(.el-tabs__content) {
        padding: 0px;
      }

      :deep(.el-tabs__active-bar) {
        display: none;
      }

      :deep(.el-tabs__item) {
        color: #bcc9d4;
      }

      :deep(.el-tabs__item.is-active) {
        color: #427ff7 !important;
      }

      .custom-tabs-label {
        font-size: 18px;
        display: flex;
        align-items: center;

        &>span {
          margin-left: 8px;
        }
      }

      .nav-shadow {
        background: linear-gradient(180deg,transparent,#171b22);
        height: 30px;
        width: 100%;
      }

      .my-project {
        display: flex;
        height: 100%;
        background-color: #171b22;

        .project-manage {
          width: 240px;
          color: #fff;

          .input-with-select {
            width: 180px;
            height: 32px;
            color: #fff;
            padding: 0 8px;
            box-sizing: border-box;
          }

          &>div:nth-child(1) {
            height: 56px;
            padding: 0 30px 0 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

          &>div:nth-child(2) {
            display: flex;
            justify-content: center;

            &>input {
              background-color: #171b22;
            }
          }

          &>ul {

            li {
              color: #bcc9d4;
              height: 36px;
              padding: 0 30px 0 50px;
              display: flex;
              font-size: 12px;
              align-items: center;
              justify-content: space-between;
              cursor: pointer;
            }
          }
        }

        .project-screen {
          flex: 1;
          margin-left: 20px;
          color: #427ff7;

          .new-project {
            width: 258px;
            height: 78px;
            margin: 16px 32px 16px 0;
            vertical-align: middle;
            border: 1px solid #39414d;
            background: #22272e;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            color: #fff;

            &>img {
              width: 150px;
              height: 100%;
            }

            &>span {
              padding-left: 8px;
              flex: 1;
              font-size: 14px;
            }

            &:hover {
              border: 1px solid #427ff7;
            }
          }

          .all-app {

            .app-head {
              display: flex;
              align-items: center;
              padding: 12px 0;
              border-bottom: 1px solid #434b55;

              &>span:nth-child(1) {
                padding: 0 10px;
                border-left: 2px solid #427ff7;
              }

              &>i {
                margin: 0 10px;
              }
            }

            .app-list {
              padding: 24px 0;

              ul {
                display: flex;
                flex-wrap: wrap;

                li {
                  width: 256px;
                  height: 184px;
                  margin-right: 30px;
                  margin-bottom: 30px;
                  border: 1px solid #3a4659;
                  position: relative;

                  .app-avatar {
                    width: 100%;;
                    height: 146px;

                    img {
                      width: 100%;
                      height: 100%;
                      object-fit: cover;
                    }
                  }

                  .app-button {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 146px;
                    background-color: #000;
                    display: flex;
                    flex-direction: column;
                    color: #fff;
                    padding-top: 10px;
                    box-sizing: border-box;

                    .icon-color {
                      cursor: pointer;

                      &:hover {
                        color: #2681ff;
                      }
                    }

                    &>div:nth-child(1) {
                      display: flex;
                      justify-content: flex-end;

                      &>i {
                        margin-right: 18px;
                        font-size: 18px;
                      }
                    }

                    &>div:nth-child(2) {
                      display: flex;
                      justify-content: center;

                      &>button {
                        padding: 4px 40px;
                        border: 1px solid #2681ff;
                        background: #2681ff;
                        color: #fff;
                        font-size: 16px;
                        cursor: pointer;
                        margin: 16px 0;
                      }
                    }

                    &>div:nth-child(3) {
                      display: flex;
                      justify-content: center;

                      &>i {
                        margin-right: 18px;
                        font-size: 18px;
                      }
                    }
                  }

                  .app-name {
                    height: 36px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 12px;
                    box-sizing: border-box;
                    background-color: #22272e;
                    color: #bcc9d4;

                    :deep(.el-input__wrapper) {
                      background-color: #22272e;
                      box-shadow: none;
                    }

                    &>div:nth-child(1) {
                      display: flex;
                      align-items: center;
                      font-size: 16px;

                      &>i {
                        margin-right: 4px;
                      }

                      :deep(.el-input__inner) {
                        color: #bcc9d4;

                        &:hover {
                          color: #fff;
                        }
                      }

                      :deep(.el-input__wrapper) {
                        width: 130px;
                      }
                    }

                    &>div:nth-child(2) {
                      font-size: 12px;
                      display: flex;
                      align-items: center;

                      &>span {
                        background-color: #576369;
                        margin-right: 5px;
                        display: inline-block;
                        width: 8px;
                        height: 8px;
                        border-radius: 5px;
                      }

                      .active {
                        background-color: #1fadf1;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .to-do {
    width: 100%;
    height: 80vh;
    background-color: #171b22;
    color: #bcc9d4;
  }
}
</style>
